<template>
  <div style="color: #666; font-size: 14px">
    <div style="padding-bottom: 20px">
      <b>您好！{{ user.nickname }}</b>
    </div>
    <el-row style="width: 100%; display: flex; align-items: stretch">
      <el-col :span="8" style="padding-right: 20px">
        <el-card style="width: 100%; height: 100%">
          <el-row>
            <el-col :span="8">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <i class="el-icon-user-solid" style="font-size: 24px"></i>
                <div>公司总人数</div>
                <div>1307</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <i class="el-icon-user-solid" style="font-size: 24px"></i>
                <div>入职人数</div>
                <div>1307</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <i class="el-icon-user-solid" style="font-size: 24px"></i>
                <div>离职人数</div>
                <div>1307</div>
              </div>
            </el-col>
          </el-row>
          <div style="padding-top: 30px">各部门人数</div>
          <div
            id="main1"
            style="
              width: 100%;
              height: 300px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          ></div>
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-right: 20px">
        <el-card style="width: 100%; height: 100%">
          <el-row>
            <el-col :span="12">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <i class="el-icon-user-solid" style="font-size: 24px"></i>
                <div>缺勤人次</div>
                <div>1307</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <i class="el-icon-user-solid" style="font-size: 24px"></i>
                <div>请假人次</div>
                <div>1307</div>
              </div>
            </el-col>
          </el-row>
          <div
            id="main2"
            style="
              width: 100%;
              height: 300px;
              padding-top: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          ></div>
        </el-card>
      </el-col>

      <el-col :span="8" style="padding-right: 20px">
        <el-card style="width: 100%; height: 100%">
          <el-row> 年龄构成 </el-row>
          <div
            id="main3"
            style="
              width: 100%;
              height: 350px;
              padding-top: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          ></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="width: 99%; display: flex; align-items: stretch">
      <el-card style="width: 100%; height: 100%">
        <div
          id="main4"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 500px;
          "
        ></div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    myEcharts1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main1"));

      var departmentsName = this.main1Data.map((item) => item.departmentName);
      var userCount = this.main1Data.map((item) => item.userCount);

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: departmentsName,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: userCount,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    myEcharts2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main2"));

      var seriesData = [
        { value: this.main2Data["缺勤人次"], name: "缺勤人次" },
        { value: this.main2Data["请假人次"], name: "请假人次" },
        { value: this.main2Data["不缺勤人次"], name: "不缺勤人次" },
      ];
      var option = {
        title: {
          text: "总占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: seriesData,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    myEcharts3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main3"));

      var seriesData = [
        { value: this.main3Data["20-29"], name: "20-29" },
        { value: this.main3Data["30-39"], name: "30-39" },
        { value: this.main3Data["40-49"], name: "40-49" },
        { value: this.main3Data["50-59"], name: "50-59" },
        { value: this.main3Data["60及以上"], name: "60及以上" },
      ];

      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: seriesData,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    myEcharts4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main4"));
      var seriesData = Object.keys(this.main4Data).map((department) => ({
        name: department,
        type: "scatter",
        data: this.main4Data[department].map((item) => [item.age, item.salary]),
      }));

      var option = {
        title: {
          text: "各部门薪资分布",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              params[0].seriesName +
              "<br/>" +
              "年龄: " +
              params[0].value[0] +
              "<br/>" +
              "薪资: " +
              params[0].value[1] +
              "元"
            );
          },
        },
        legend: {
          data: Object.keys(this.main4Data),
        },
        xAxis: {
          name: "年龄",
          type: "value",
          min: 0,
          max: 100,
          interval: 10
        },
        yAxis: {
          name: "薪资（元）",
          type: "value",
          min: 0,
          interval: 3000
        },
        series: seriesData
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    load() {
      this.request.get("/echarts/main1").then((res) => {
        if (res.code === "200") {
          this.main1Data = res.data;
          this.$nextTick(() => {
            this.myEcharts1();
          });
        } else {
          this.$message.error("数据获取失败");
        }
      });

      this.request.get("/echarts/main2").then((res) => {
        if (res.code === "200") {
          this.main2Data = res.data;
          this.$nextTick(() => {
            this.myEcharts2();
          });
        } else {
          this.$message.error("数据获取失败");
        }
      });

      this.request.get("/echarts/main3").then((res) => {
        if (res.code === "200") {
          this.main3Data = res.data;
          this.$nextTick(() => {
            this.myEcharts3();
          });
        } else {
          this.$message.error("数据获取失败");
        }
      });

      this.request.get("/echarts/main4").then((res) => {
        if (res.code === "200") {
          this.main4Data = res.data;
          console.log(this.main4Data);
          this.$nextTick(() => {
            this.myEcharts4();
          });
        } else {
          this.$message.error("数据获取失败");
        }
      });
    },
  },
  data() {
    return {
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},

      main1Data: [],
      main2Data: [],
      main3Data: [],
      main4Data: [],
    };
  },
  created() {
    this.load();
  },
};
</script>

<style scoped>
</style>